import React, { PureComponent } from 'react';
import { connect, Dispatch } from 'umi';
import { Layout, Tree, Spin, Row, Col } from 'antd';
import PdfViewer from '@/components/PdfViewer';

import { StateType } from './model';

const { Content, Sider, Header } = Layout;

interface BasicProps {
  match: any;
  compare: StateType;
  dispatch: Dispatch;
  loading: boolean;
  treeData: any[],
}

interface BasicState {
  autoExpandParent: boolean;
  selectedKeys: string[];
  mPage: number;
  oPage: number;
  mRef: any;
  oRef: any;
  scale: number;
}

class CompareResult extends PureComponent<BasicProps, BasicState> {

  state = {
    autoExpandParent: true,
    selectedKeys: [],
    mPage: 0,
    oPage: 0,
    mRef: null,
    oRef: null,
    scale: 1,
  }

  componentDidMount() {
    this.fetchInitData();
  }

  fetchInitData = () => {
    const {
      match: {
        params: {
          modify, // 修改后图纸ID
          original, // 修改前图纸ID
        }
      },
      dispatch,
    } = this.props;
    dispatch({
      type: 'compare/fetch',
      payload: {
        mId: modify,
        oId: original,
      }
    });
  }

  handleSelect = (selectedKeys: any, e: any) => {
    this.setState({
      selectedKeys,
    });
    const { node, selected } = e;
    if (selected) {
      const { type, data: {
        mPage,
        oPage,
        page,
      } } = node;
      switch (type) {
        case "diff":
          this.setState({
            mPage,
            oPage,
          })
          break;
        case "miss":
        case "increas":
          this.setState({
            mPage: page,
            oPage: page,
          })
          break;
        default:
          break;
      }
    }
  }

  handleDrawComplete = () => { }

  handleSetMRef = (ref: any) => {
    this.setState({
      mRef: ref,
    });
  }

  handleSetORef = (ref: any) => {
    this.setState({
      oRef: ref,
    });
  }

  handleScroll = (left: number, top: number) => {
    const { mRef, oRef } = this.state;
    if (mRef) {
      mRef.scrollLeft = left;
      mRef.scrollTop = top;
    }
    if (oRef) {
      oRef.scrollLeft = left;
      oRef.scrollTop = top;
    }
  }

  handleZoom = (scale: number) => {
    this.setState({
      scale,
    });
  }

  handlePageChange = (current: number) => {
    this.setState({
      oPage: current,
      mPage: current,
    });
  }

  render() {
    const { autoExpandParent, selectedKeys, mPage, oPage, scale } = this.state;
    const { loading, compare: { treeData, compareList, compareMarks } } = this.props;

    return (
      <Spin tip="正在比对中" spinning={loading}>
        <Layout>
          <Header style={{ color: 'rgba(255, 255, 255, 0.65)', textAlign: 'center' }}>
            <div style={{ fontSize: 24 }}>图纸比对结果</div>
          </Header>
          <Layout>
            <Sider theme="light" width={240} style={{ padding: 5 }}>
              <Tree
                showIcon
                showLine
                autoExpandParent={autoExpandParent}
                onSelect={this.handleSelect}
                selectedKeys={selectedKeys}
                treeData={treeData}
              />
            </Sider>
            <Content style={{ padding: '0 0 0 6px', minHeight: window.innerHeight - 64 }}>
              {
                compareList && compareList.length === 2 && (
                  <Row gutter={16}>
                    <Col span={12}>
                      <PdfViewer
                        scale={scale}
                        setRef={this.handleSetORef}
                        page={oPage}
                        canvasDivHeight={window.innerHeight - 100}
                        url={compareList[1].url}
                        marks={compareMarks[1]}
                        markable={false}
                        onDrawComplete={this.handleDrawComplete}
                        onScroll={this.handleScroll}
                        onZoom={this.handleZoom}
                        onPageChange={this.handlePageChange}
                      />
                    </Col>
                    <Col span={12}>
                      <PdfViewer
                        scale={scale}
                        setRef={this.handleSetMRef}
                        page={mPage}
                        canvasDivHeight={window.innerHeight - 100}
                        url={compareList[0].url}
                        marks={compareMarks[0]}
                        markable={false}
                        onDrawComplete={this.handleDrawComplete}
                        onScroll={this.handleScroll}
                        onZoom={this.handleZoom}
                        onPageChange={this.handlePageChange}
                      />
                    </Col>
                  </Row>
                )
              }
            </Content>
          </Layout>
        </Layout>
      </Spin>
    );
  }

}

export default connect(
  ({
    compare,
    loading,
  }: {
    compare: StateType,
    loading: {
      models: { [key: string]: boolean };
    };
  }) => ({
    compare,
    loading: loading.models.compare,
  }),
)(CompareResult);